<!--站点详情-->
<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link href="../css/mui.min.css" rel="stylesheet" />
	<style type="text/css">
		
		#sliderSegmentedControl{
			background-color: #A0B1C4;
			color:white;
		}
		.mui-segmented-control.mui-scroll-wrapper {
			height: initial;
			height: 80px;
		}
		
		.mui-segmented-control.mui-scroll-wrapper .mui-scroll {
			height: 80px;
		}
		
		.mui-fullscreen {
			position: initial;
			background-color: #EFEFF4;
		}
		
		.mui-segmented-control.mui-scroll-wrapper .mui-control-item {
			padding: 0 18px;
		}
		
		.mui-content {
			margin-top: 54px;
		}
		
		.mui-content-padded {
			background-color: #EFEFF4 margin:initial;
			padding: 10px;
		}
		
		#content01 {
			position: fixed;
			top: 44px;
			z-index: 5;
		}
		.content-text-1 {
			margin-top: 10px;
			color: #FFFFFF;
			font-size: 18px;
		}
		
		.content-text-2 {
			margin-top: 20px;
			color: #DD524D;
			font-size: 40px;
		}
		
		.content-text-3 {
			margin-top: 20px;
			color: #FFFFFF;
			font-size: 12px;
		}
		
		.mui-media-body {
			color: white;
		}
		
		.mui-table-view.mui-grid-view{
			padding:7px 10px 25px 0;
		}
		.mui-title {
			color: white;
		}
		
		.mui-text-center {
			color: #DD524D;
			font-size: 48px;
		}
		
		.mui-icon-refreshempty:before {
			color: white;
		}
		
		.iconfontItem {
			font-family: "iconfont" !important;
			font-size: 48px;
			font-style: normal;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
			color: #4ec2f0;
		}
		
		
		.mui-icon-refresh:before{
			color:white;
		}
		.iconColor{
			color:#F0AD4E;
		}
		.mui-icon-back:before, .mui-icon-left-nav:before{
			color:white;
		}
		
		header h1.mui-title{
			overflow: hidden;
			text-overflow:ellipsis;
			white-space: nowrap;
			
		}
		
		.chart {
			height: 200px;
			margin: 0px;
			padding: 0px;
		}
		
		h5 {
			margin-top: 30px;
			font-weight: bold;
		}
		h5:first-child {
			margin-top: 15px;
		}
		.child{   
		  float: left;   
		  width: 25%;   
		} 
			
	</style>
</head>
<body>
<!--头部内容-->
	<header class="mui-bar mui-bar-nav">
	    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" id ="TitleBar"></a>
	    <h1 class="mui-title"></h1>
	</header>
	<div class="mui-content">
		<div class="mui-card">
			<div class="mui-card-content" style="height:40vw;background: #0062CC;">
				<div class="mui-card-content-inner" style="text-align:center">
					<div id="box">
						<div class="content-text-1" >最大需量(kWh)</div>
						<div class="content-text-2" id="max_data">0.00</div>
						<div class="content-text-3" id="e_time"></div>
						
					</div>
					
				</div>
			</div>
		</div>
		<div class="mui-content-padded" >
			<div style="margin: auto;text-align:center" >
				<div class="child" > 
					<div style="width: 100px;height: 50px;">开始: </div>
				</div>
				<div class="child" > 
					<div id="startdate" style="width: 100px;height: 50px;">2019-05-27</div>
				</div>
				<div class="child" > 
					<div style="width: 100px;height: 50px;">结束:</div>
				</div>
				<div class="child" > 
					<div id="enddate" style="width: 100px;height: 50px;">2019-05-27</div>
				</div>

			</div>
			
			<h5>需量显示</h5>
			<div class="chart" id="lineChart"></div>
		</div>
		
		
		
	</div>


</body>
<script src="../js/mui.min.js"></script>
<script src="../js/common.js"></script>
<script src="../js/echarts.min.js"></script>
<script src="../js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="../js/ZNative.js"></script>
<script type="text/javascript">
	
	mui.init();
	mui("header h1.mui-title")[0].innerHTML = localStorage.getItem('dcsName') +"-> "+ localStorage.getItem('dclname');
	
	document.getElementById("TitleBar").addEventListener('tap', function() {
	
		WebOS.onBack();
	});
	
	var token = localStorage.getItem('token');
	var getNowDate= function(){
		
		var date = new Date();
		var y = date.getFullYear();    
		var m = date.getMonth() + 1;    
		m = m < 10 ? ('0' + m) : m;    
		var d = date.getDate();    
		d = d < 10 ? ('0' + d) : d;  
		
		return {
				year:y,
				month:m,
				day:d};
		
	}
	var date= getNowDate();
	mui("#startdate")[0].innerText = date.year+"-"+date.month+"-"+date.day;
	mui("#enddate")[0].innerText = date.year+"-"+date.month+"-"+date.day;
	
	
	
	document.getElementById("startdate").addEventListener('tap', function() {
		
		var nowdate = getNowDate();
		var year = nowdate.year;    
		var month = nowdate.month;    
		var day = nowdate.day;    
		
		var dDate = new Date();
		dDate.setFullYear(year, month-1, day);
		var minDate = new Date();
		minDate.setFullYear(year, 0, 1);
		var maxDate = new Date();
		maxDate.setFullYear(year, 11, 31);
		plus.nativeUI.pickDate(function(e) {
			
			var d = e.date;
			var month =d.getMonth() + 1;
			var day =d.getDate();
			month = month<10? '0'+month:month;
			day = day<10? '0'+day:day;
			
			var _date = d.getFullYear() + "-" + month + "-" + day;
			mui("#startdate")[0].innerText = _date;
		}, function(e) {
			return null;
		
		}, {
			title: "请选择日期",
			date: dDate,
			minDate: minDate,
			maxDate: maxDate
		});
		
		
	})
	
	document.getElementById("enddate").addEventListener('tap', function() {
		
		var nowdate = getNowDate();
		var year = nowdate.year;    
		var month = nowdate.month;    
		var day = nowdate.day;    
		
		
		var dDate = new Date();
		dDate.setFullYear(year, month-1, day);
		var minDate = new Date();
		minDate.setFullYear(year, 0, 1);
		var maxDate = new Date();
		maxDate.setFullYear(year, 11, 31);
		plus.nativeUI.pickDate(function(e) {
			var d = e.date;
			var month =d.getMonth() + 1;
			var day =d.getDate();
			month = month<10? '0'+month:month;
			day = day<10? '0'+day:day;
			
			var _date = d.getFullYear() + "-" + month + "-" + day;
			mui("#enddate")[0].innerText = _date;
			
			
			
			gethisData();
			
		}, function(e) {
			return null;
			
		
		}, {
			title: "请选择日期",
			date: dDate,
			minDate: minDate,
			maxDate: maxDate
		});
	})
	
	
	var byId = function(id) {
		return document.getElementById(id);
	};
	

	//默认当天需量
	var url = getUrl+'Energyanaly/GetPowerquality31';
	console.log(url);
	mui.plusReady(function(){

		var date = getNowDate();
		var startTime = date.year +'-'+date.month+'-'+date.day +' 00:00:00';
		var endTime = date.year +'-'+date.month+'-'+date.day +' 23:59:59';

		mui.ajax(url,{
				data: {
					sysId:sysId,
					token: token,
					stostationid:localStorage.getItem('dcsId'),
					stolineid:localStorage.getItem('dclId'),
					startTime:startTime,
					endTime:endTime
				},
				dataType: 'json', //服务器返回json格式数据
				type: 'post', //HTTP请求类型
				timeout: 10000, //超时时间设置为10秒；
				headers: {
					'Content-Type': 'application/x-www-form-urlencoded'
				},
				success: function(data){
					
					if(data.tokenFlag == false) {
						mui.alert(data.msg);
						//记得每个页面都要有这个判断						
					} else {
						var respone=JSON.stringify(data);
						console.log(respone);
						
						var Value =[];
						var X_Time =[];
						var Max_data = 0;
						var eTime = null;
			            for(i=0;i<data.length;i++){

							var _value = data[i].demand;
							var _time = data[i].sto_sync_time;
							
							Value.push(_value);
							X_Time.push(_time);
							
							//最大值
							if(_value > Max_data){
								Max_data = _value;
								eTime = _time;
							}
			            }
						
						var series = [{
							name: '需量',
							type: 'line',
							data: Value
						}];
						
						var lineData = {title:['需量'],series:series,unit:'kWh',X_Time:X_Time};
						var LineChart = echarts.init(byId('lineChart'));
						LineChart.setOption(getOption(lineData));
						
						mui("#max_data")[0].innerText = Max_data;
						mui("#e_time")[0].innerText = eTime;
		            	

					}
					
	             },   
				error: function(e) {
					//异常处理；
					mui.toast("网络出错了...");
				}
			});
	});
	
	
	var gethisData =  function(){
		
				
		var sTime = mui('#startdate')[0].innerText;
		var eTime = mui('#enddate')[0].innerText;
		
		var startTime = sTime+' 00:00:00';
		var endTime = eTime+' 23:59:59';
		
		console.log(startTime);
		console.log(endTime);
		
			
		mui.ajax(url,{
				data: {
					sysId:sysId,
					token: token,
					stostationid:localStorage.getItem('dcsId'),
					stolineid:localStorage.getItem('dclId'),	
					startTime:startTime,
					endTime:endTime
					
				},
				dataType: 'json', //服务器返回json格式数据
				type: 'post', //HTTP请求类型
				timeout: 10000, //超时时间设置为10秒；
				headers: {
					'Content-Type': 'application/x-www-form-urlencoded'
				},
				success: function(data){
					
					if(data.tokenFlag == false) {
						mui.alert(data.msg);
						//记得每个页面都要有这个判断						
					} else {
						var respone=JSON.stringify(data);
						console.log(respone);
						
						var Value =[];
						var X_Time =[];
						var Max_data = 0;
						var eTime = null;
			            for(i=0;i<data.length;i++){
		
							var _value = data[i].demand;
							var _time = data[i].sto_sync_time;
							
							Value.push(_value);
							X_Time.push(_time);
							
							//最大值
							if(_value > Max_data){
								Max_data = _value;
								eTime = _time;
							}
			            }
						
						var series = [{
							name: '需量',
							type: 'line',
							data: Value
						}];

						var lineData = {title:['需量'],series:series,unit:'kWh',X_Time:X_Time};
						var LineChart = echarts.init(byId('lineChart'));
						LineChart.setOption(getOption(lineData));
						
						mui("#max_data")[0].innerText = Max_data;
						mui("#e_time")[0].innerText = eTime;
		            	
		
					}
					
		         },   
				error: function(e) {
					//异常处理；
					mui.toast("网络出错了...");
				}
			});
		
	};
	
	
	
	
	
	var getOption = function(data) {
				
				var title  = data.title;
				var unit  = data.unit;
				var Time = data.X_Time;
				var series  = data.series;
				
				var chartOption = {
						color: ['#e6b600','#2b821d', '#c12e34', '#0098d9'],
						legend: {
							data: title
						},
						grid: {
							x: 35,
							x2: 10,
							y: 30,
							y2: 25
						},
						toolbox: {
							show: false,
							feature: {
								mark: {
									show: true
								},
								dataView: {
									show: true,
									readOnly: false
								},
								magicType: {
									show: true,
									type: ['line', 'bar']
								},
								restore: {
									show: true
								},
								saveAsImage: {
									show: true
								}
							}
						},
						tooltip : {
				            show:true,
							trigger: 'axis'
						},
						calculable: false,
						xAxis: [{
							type: 'category',
							data: Time
						}],
						yAxis: [{
							name : unit ,
							type: 'value',
							splitArea: {
								show: true,
							},
							axisTick: {
					            inside: true
					        },
					        scale: true,
					        axisLabel: {
					            margin: 2,
					            formatter: function (value, index) {
									if (value >= 10000 && value < 10000000) {
					                    value = value / 10000 + "万";
					                } else if (value >= 10000000) {
					                    value = value / 10000000 + "千万";
					                }else if (value >= 100000000){
					                	value = value / 100000000 + "亿";
					                }else if (value >= 10000000000){
					                	value = value / 10000000000 + "百亿";
					                }else if (value >= 100000000000){
					                	value = value / 100000000000 + "千亿";
					                }
					                return value; 
					            }
					        }
						}],
						series: series
					};
					return chartOption;
			};
	
	
		
		
		
		
		
	
	
</script>
</html>